vue与百度地图结合的BMap is not defined问题

首先,得确保首页index.html引入的百度地图的秘钥

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script>

在网上百度了很多方法,也一一尝试了,下面介绍一种实践成功了的方法

百度api官网里的异步加载很像

首先跟入口js文件一样,新建一个map.js文件

export function MP(ak) {
  return new Promise(function (resolve, reject) {
    window.onload = function () {
      resolve(BMap)
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

然后在要用到百度地图的页面调用(ak 就是密钥)

<script>
import {MP} from './map.js'  
export default {
    data() {
        return {
            ak: '秘钥',
            ....
        }
    }
    mounted(){  
          MP(this.ak).then(BMap => {  
              //在此调用api  
          })
     } 
     ......
}
</script>

同样的,挂载其他外部类库有问题时也可以尝试这样做

具体可参考我的个人项目中的map.js百度地图初始化组件百度地图demo